<template>
  <div class="basemap">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      linedata: [
        [29.605, 106.695],
        [29.563, 106.5808],
        [29.5428, 106.5923],
        [29.5679, 106.4193],
        [29.623, 106.4193],
        [29.66, 106.6054],
      ],
    };
  },
  mounted() {
    this.initMap();
    let layers = this.drawLine(this.linedata);
    this.map.addLayer(layers);
  },
  methods: {
    initMap() {
      // 重庆市经纬度 107.820952,29.839539
      // const cqp = this.$L.latLng(29.5647398, 106.5478767);
      const cqp = this.$L.latLng(29.602163, 106.534291);

      this.map = this.$L
        .map("map", {
          // 版权控件
          attributionControl: false,
          // 缩放控件
          zoomControl: false,
        })
        .setView(cqp, 12);

      // 天地图token
      const tdtToken = "810e2cf8deac0489c6bb8ee29e5d9591";
      // 天地图 影像底图
      const wmtsImg =
        "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
        tdtToken;

      this.$L
        .tileLayer(wmtsImg, {
          maxZoom: 18,
        })
        .addTo(this.map);
    },
    drawLine(linedata) {
      let lineLayers = this.$L.layerGroup();

      // 轨迹
      let line = this.$L.polyline(linedata, {
        color: "#00ff00",
        weight: 10,
      });

      // 轨迹方向 箭头
      let lineArrow = this.$L.polylineDecorator(line, {
        patterns: [
          {
            repeat: 30,
            symbol: this.$L.Symbol.arrowHead({
              pixelSize: 10,
              headAngle: 75,
              polygon: false,
              pathOptions: {
                stroke: true,
                weight: 3,
                color: "#fff",
              },
            }),
          },
        ],
      });

      lineLayers.addLayer(line);
      lineLayers.addLayer(lineArrow);

      // 图标
      let iconPic = this.$L.icon({
        iconSize: [30, 30],
        iconAnchor: [15, 30],
        popupAnchor: [0, -40],
        iconUrl: require("leaflet/dist/images/marker-icon.png"),
        shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
      });

      // let marker1 = this.$L.Marker.movingMarker(linedata, this.calculate(linedata), {
      let marker1 = this.$L.Marker.movingMarker(linedata, 10000, {
        icon: iconPic,

        // loop: true,
      });

      lineLayers.addLayer(marker1);

      marker1.once("click", e=> {
        console.log('eeeeeee',e);
        marker1.start();
        marker1.closePopup();
        marker1.unbindPopup();
        marker1.on("click", function () {
          if (marker1.isRunning()) {
            marker1.pause();
          } else {
            marker1.start();
          }
        });
        marker1.bindPopup("<b>显示信息 !</b>").openPopup();
      });

      marker1.bindPopup("<b>点我开始</b> !</b>", {
        closeOnClick: false,
      });
      marker1.openPopup();

      return lineLayers;
    },
    rad(data) {
      // 弧度计算
      return (data * Math.PI) / 180;
    },
    calculate(linedata) {
      let distance = 0;
      for (let i = 0; i < linedata.length; i++) {
        let lat1 = linedata[i][0],
          lng1 = linedata[i][1];
        if (i + 1 == linedata.length) {
          break;
        }
        let lat2 = linedata[i + 1][0],
          lng2 = linedata[i + 1][1];

        let radLat1 = this.rad(lat1);
        let radLat2 = this.rad(lat2);
        let a = radLat1 - radLat2;
        let b = this.rad(lng1) - this.rad(lng2);
        let s =
          2 *
          Math.asin(
            Math.sqrt(
              Math.pow(Math.sin(a / 2), 2) +
                Math.cos(radLat1) *
                  Math.cos(radLat2) *
                  Math.pow(Math.sin(b / 2), 2)
            )
          );
        s = s * 6378.137; // EARTH_RADIUS;
        // 输出为公里
        s = Math.round(s * 10000) / 10000;
        distance += s;
      }
      // 完成时间 毫秒
      let speed = 0;
      if(distance > 0) {
        speed = 10000;
      }else if(distance > 200){
        speed = 20000;

      }else if(distance > 500){
        speed = 30000;
      }
      return speed
    },
  },
};
</script>

<style lang="scss" scoped>
</style>